---
id: navbar
title: Navbar
description:
  Top navigation, typically used as primary navigation in websites or stacked
  application layouts.
links:
  source: components/navbar
  storybook: components-navbar--basic
  recipe: navbar
---

<ExampleTabs
  name="navbar-basic"
  maxHeight="400px"
  overflow="auto"
  padding="0"
/>

## Anatomy

```jsx
import { Navbar } from '@saas-ui/react/navbar'
```

```jsx
<Navbar.Root>
  <Navbar.Content>
    <Navbar.Item>
      <Navbar.Link>Home</Navbar.Link>
    </Navbar.Item>
  </Navbar.Content>
</Navbar.Root>
```

## Usage

### Sticky navbar

Navbar uses `position` static by default, you can use `sticky` to make it stick
to the top of the page.

<ExampleTabs
  name="navbar-sticky"
  maxHeight="400px"
  overflow="auto"
  padding="0"
/>

### Border bottom

Simply add `borderBottomWidth="1px"` to the navbar to add a bottom border.

<ExampleTabs
  name="navbar-border-bottom"
  maxHeight="400px"
  overflow="auto"
  padding="0"
/>

### Glass variant

The `glass` variant will make the background translucent with a blur effect.

<ExampleTabs
  name="navbar-variant-glass"
  maxHeight="400px"
  overflow="auto"
  padding="0"
/>

### Solid variant

The `solid` variant renders the navbar with solid background color.

<ExampleTabs
  name="navbar-variant-solid"
  maxHeight="400px"
  overflow="auto"
  padding="0"
/>

### Hide on scroll

Setting the `shouldHideOnScroll` prop to `true` will hide the navbar when the
user scrolls down and show it when the user scrolls up. Use the `parentRef` prop
to specify the parent scroll container, defaults to the `window` object.

<ExampleTabs
  name="navbar-hide-on-scroll"
  maxHeight="400px"
  overflow="auto"
  padding="0"
/>

### With mobile navigation

Add a mobile navigation menu to the navbar using the `Drawer` component.

<ExampleTabs
  name="navbar-mobile-nav"
  maxHeight="400px"
  overflow="auto"
  padding="0"
/>
